

<!DOCTYPE html>
<html lang="zh-CN" data-default-color-scheme=auto>



<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" sizes="76x76" href="/img/fluid.png">
  <link rel="icon" href="/img/fluid.png">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  
  <meta name="theme-color" content="#2f4154">
  <meta name="author" content="John Doe">
  <meta name="keywords" content="">
  
    <meta name="description" content="@[toc]参考资料：  https:&#x2F;&#x2F;es6.ruanyifeng.com&#x2F;#docs&#x2F;intro https:&#x2F;&#x2F;www.bilibili.com&#x2F;video&#x2F;BV1uK411H7on  1. ECMAScriptECMA（European Computer Manufacturers Association）中文名称为欧洲计算机制造商协会，这个组织目标是评估、开发和认可电信和计算机标准。1">
<meta property="og:type" content="article">
<meta property="og:title" content="JavaScript 笔记1 ES6 新特性 _ 解构赋值、模板字符串、Symbol数据类型、Promise、模块化">
<meta property="og:url" content="http://example.com/2022/08/16/JavaScript%20%E7%AC%94%E8%AE%B01%20ES6%20%E6%96%B0%E7%89%B9%E6%80%A7%20_%20%E8%A7%A3%E6%9E%84%E8%B5%8B%E5%80%BC%E3%80%81%E6%A8%A1%E6%9D%BF%E5%AD%97%E7%AC%A6%E4%B8%B2%E3%80%81Symbol%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B%E3%80%81Promise%E3%80%81%E6%A8%A1%E5%9D%97%E5%8C%96/index.html">
<meta property="og:site_name" content="Hexo">
<meta property="og:description" content="@[toc]参考资料：  https:&#x2F;&#x2F;es6.ruanyifeng.com&#x2F;#docs&#x2F;intro https:&#x2F;&#x2F;www.bilibili.com&#x2F;video&#x2F;BV1uK411H7on  1. ECMAScriptECMA（European Computer Manufacturers Association）中文名称为欧洲计算机制造商协会，这个组织目标是评估、开发和认可电信和计算机标准。1">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://img-blog.csdnimg.cn/f8bd3f78dd8b4a188e4c5bd42b81f59e.png">
<meta property="og:image" content="https://img-blog.csdnimg.cn/9b299a0d7f7d459e8b6285cf6cf9a815.png">
<meta property="og:image" content="https://img-blog.csdnimg.cn/d68a07a3a7954736b1df9c10f5abdff8.png">
<meta property="og:image" content="https://img-blog.csdnimg.cn/4413d9d706ce47acaac7872b06105c4f.png">
<meta property="og:image" content="https://img-blog.csdnimg.cn/ba1c8a0e265c431d8f1d1c1c211cd9b0.png">
<meta property="article:published_time" content="2022-08-16T11:19:27.000Z">
<meta property="article:modified_time" content="2022-08-22T15:45:30.264Z">
<meta property="article:author" content="John Doe">
<meta property="article:tag" content="JavaScript">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://img-blog.csdnimg.cn/f8bd3f78dd8b4a188e4c5bd42b81f59e.png">
  
  
  
  <title>JavaScript 笔记1 ES6 新特性 _ 解构赋值、模板字符串、Symbol数据类型、Promise、模块化 - Hexo</title>

  <link  rel="stylesheet" href="https://lib.baomitu.com/twitter-bootstrap/4.6.1/css/bootstrap.min.css" />



  <link  rel="stylesheet" href="https://lib.baomitu.com/github-markdown-css/4.0.0/github-markdown.min.css" />

  <link  rel="stylesheet" href="https://lib.baomitu.com/hint.css/2.7.0/hint.min.css" />

  <link  rel="stylesheet" href="https://lib.baomitu.com/fancybox/3.5.7/jquery.fancybox.min.css" />



<!-- 主题依赖的图标库，不要自行修改 -->
<!-- Do not modify the link that theme dependent icons -->

<link rel="stylesheet" href="//at.alicdn.com/t/font_1749284_hj8rtnfg7um.css">



<link rel="stylesheet" href="//at.alicdn.com/t/font_1736178_lbnruvf0jn.css">


<link  rel="stylesheet" href="/css/main.css" />


  <link id="highlight-css" rel="stylesheet" href="/css/highlight.css" />
  
    <link id="highlight-css-dark" rel="stylesheet" href="/css/highlight-dark.css" />
  




  <script id="fluid-configs">
    var Fluid = window.Fluid || {};
    Fluid.ctx = Object.assign({}, Fluid.ctx)
    var CONFIG = {"hostname":"example.com","root":"/","version":"1.9.2","typing":{"enable":true,"typeSpeed":70,"cursorChar":"_","loop":false,"scope":[]},"anchorjs":{"enable":true,"element":"h1,h2,h3,h4,h5,h6","placement":"left","visible":"hover","icon":""},"progressbar":{"enable":true,"height_px":3,"color":"#29d","options":{"showSpinner":false,"trickleSpeed":100}},"code_language":{"enable":true,"default":"TEXT"},"copy_btn":true,"image_caption":{"enable":true},"image_zoom":{"enable":true,"img_url_replace":["",""]},"toc":{"enable":true,"placement":"right","headingSelector":"h1,h2,h3,h4,h5,h6","collapseDepth":0},"lazyload":{"enable":true,"loading_img":"/img/loading.gif","onlypost":false,"offset_factor":2},"web_analytics":{"enable":false,"follow_dnt":true,"baidu":null,"google":null,"gtag":null,"tencent":{"sid":null,"cid":null},"woyaola":null,"cnzz":null,"leancloud":{"app_id":null,"app_key":null,"server_url":null,"path":"window.location.pathname","ignore_local":false}},"search_path":"/local-search.xml"};

    if (CONFIG.web_analytics.follow_dnt) {
      var dntVal = navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack;
      Fluid.ctx.dnt = dntVal && (dntVal.startsWith('1') || dntVal.startsWith('yes') || dntVal.startsWith('on'));
    }
  </script>
  <script  src="/js/utils.js" ></script>
  <script  src="/js/color-schema.js" ></script>
  


  
<meta name="generator" content="Hexo 6.2.0"></head>


<body>
  

  <header>
    

<div class="header-inner" style="height: 70vh;">
  <nav id="navbar" class="navbar fixed-top  navbar-expand-lg navbar-dark scrolling-navbar">
  <div class="container">
    <a class="navbar-brand" href="/">
      <strong>尤 Ni&#39;s Blog</strong>
    </a>

    <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <div class="animated-icon"><span></span><span></span><span></span></div>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto text-center">
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/">
                <i class="iconfont icon-home-fill"></i>
                首页
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/archives/">
                <i class="iconfont icon-archive-fill"></i>
                归档
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/categories/">
                <i class="iconfont icon-category-fill"></i>
                分类
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/tags/">
                <i class="iconfont icon-tags-fill"></i>
                标签
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/about/">
                <i class="iconfont icon-user-fill"></i>
                关于
              </a>
            </li>
          
        
        
          <li class="nav-item" id="search-btn">
            <a class="nav-link" target="_self" href="javascript:;" data-toggle="modal" data-target="#modalSearch" aria-label="Search">
              &nbsp;<i class="iconfont icon-search"></i>&nbsp;
            </a>
          </li>
          
        
        
          <li class="nav-item" id="color-toggle-btn">
            <a class="nav-link" target="_self" href="javascript:;" aria-label="Color Toggle">&nbsp;<i
                class="iconfont icon-dark" id="color-toggle-icon"></i>&nbsp;</a>
          </li>
        
      </ul>
    </div>
  </div>
</nav>

  

<div id="banner" class="banner" parallax=true
     style="background: url('/img/default.png') no-repeat center center; background-size: cover;">
  <div class="full-bg-img">
    <div class="mask flex-center" style="background-color: rgba(0, 0, 0, 0.3)">
      <div class="banner-text text-center fade-in-up">
        <div class="h2">
          
            <span id="subtitle" data-typed-text="JavaScript 笔记1 ES6 新特性 _ 解构赋值、模板字符串、Symbol数据类型、Promise、模块化"></span>
          
        </div>

        
          
  <div class="mt-3">
    
      <span class="post-meta mr-2">
        <i class="iconfont icon-author" aria-hidden="true"></i>
        John Doe
      </span>
    
    
      <span class="post-meta">
        <i class="iconfont icon-date-fill" aria-hidden="true"></i>
        <time datetime="2022-08-16 19:19" pubdate>
          2022年8月16日 晚上
        </time>
      </span>
    
  </div>

  <div class="mt-1">
    
      <span class="post-meta mr-2">
        <i class="iconfont icon-chart"></i>
        
          18k 字
        
      </span>
    

    
      <span class="post-meta mr-2">
        <i class="iconfont icon-clock-fill"></i>
        
        
        
          147 分钟
        
      </span>
    

    
    
  </div>


        
      </div>

      
    </div>
  </div>
</div>

</div>

  </header>

  <main>
    
      

<div class="container-fluid nopadding-x">
  <div class="row nomargin-x">
    <div class="side-col d-none d-lg-block col-lg-2">
      

    </div>

    <div class="col-lg-8 nopadding-x-md">
      <div class="container nopadding-x-md" id="board-ctn">
        <div id="board">
          <article class="post-content mx-auto">
            <!-- SEO header -->
            <h1 style="display: none">JavaScript 笔记1 ES6 新特性 _ 解构赋值、模板字符串、Symbol数据类型、Promise、模块化</h1>
            
              <p class="note note-info">
                
                  
                    本文最后更新于：1 小时前
                  
                
              </p>
            
            
              <div class="markdown-body">
                
                <p>@[toc]<br>参考资料：</p>
<ul>
<li><a target="_blank" rel="noopener" href="https://es6.ruanyifeng.com/#docs/intro">https://es6.ruanyifeng.com/#docs/intro</a></li>
<li><a target="_blank" rel="noopener" href="https://www.bilibili.com/video/BV1uK411H7on">https://www.bilibili.com/video/BV1uK411H7on</a></li>
</ul>
<h1 id="1-ECMAScript"><a href="#1-ECMAScript" class="headerlink" title="1. ECMAScript"></a>1. ECMAScript</h1><p>ECMA（European Computer Manufacturers Association）中文名称为欧洲计算机制造商协会，这个组织目标是评估、开发和认可电信和计算机标准。1994年该组织改名为 Ecma 国际。</p>
<p>ECMAScript 简称 ES，是脚本语言的规范，平时编写的 JavaScript，是 ECMAScript规范的一种实现，ES 新特性指的是  JavaScript 新特性</p>
<p>ECMAScript 是由 Ecma 国际通过 ECMA-262 标准化的脚本程序设计语言，发展历史如下：<br>（ECMA-262 是 Ecma国际制定了许多标准中的一个）</p>
<table>
<thead>
<tr>
<th align="left">ECMA版本</th>
<th align="left">发布日期</th>
<th align="left">新特性</th>
</tr>
</thead>
<tbody><tr>
<td align="left">1</td>
<td align="left">1997 年</td>
<td align="left">制定了语言的基本语法</td>
</tr>
<tr>
<td align="left">2</td>
<td align="left">1998 年</td>
<td align="left">较小改动</td>
</tr>
<tr>
<td align="left">3</td>
<td align="left">1999 年</td>
<td align="left">引入正则、异常处理，格式化输出等，IE浏览器开始支持</td>
</tr>
<tr>
<td align="left">4</td>
<td align="left">2007年</td>
<td align="left">未发布</td>
</tr>
<tr>
<td align="left">5</td>
<td align="left">2009年</td>
<td align="left">引入严格模式，JSON、扩展对象、数组、原型、字符串、日期方法</td>
</tr>
<tr>
<td align="left">6</td>
<td align="left">2015年</td>
<td align="left">模块化，面向对象语法、Promise、箭头函数、let、const、数组解构赋值等等</td>
</tr>
<tr>
<td align="left">7</td>
<td align="left">2016年</td>
<td align="left">幂运算符、数组扩展、Async&#x2F;await 关键字</td>
</tr>
<tr>
<td align="left">8</td>
<td align="left">2017年</td>
<td align="left">Async&#x2F;await 、字符串扩展</td>
</tr>
<tr>
<td align="left">9</td>
<td align="left">2018年</td>
<td align="left">对象解构赋值，正则扩展</td>
</tr>
<tr>
<td align="left">10</td>
<td align="left">2019年</td>
<td align="left">扩展对象、数组方法</td>
</tr>
</tbody></table>
<p>注：从 ES6 开始，每年发布一个版本，版本号比年份最后一位大1</p>
<p>TC39 （Technical Committee 39）是推进 ECMAScript 发展的委员会，其会员都是各种公司（主要是浏览器厂商，有苹果、谷歌、微软等）。<br>TC39 会定期召开会议，会议由会员公司的代表与特邀专家出席</p>
<h1 id="2-ES6"><a href="#2-ES6" class="headerlink" title="2. ES6"></a>2. ES6</h1><p>为什么要学习 ES6</p>
<ul>
<li>ES6 的版本变动内容最多，具有里程碑意义</li>
<li>ES6 加入许多新的语法特性，编程实现更简单、高效</li>
<li>ES6 是前端发展趋势，就业必备技能</li>
</ul>
<p>ES6与不同浏览器版本的兼容性查询<br><a target="_blank" rel="noopener" href="http://kangax.github.io/compat-table/es6/">http://kangax.github.io/compat-table/es6/</a><br><img src="https://img-blog.csdnimg.cn/f8bd3f78dd8b4a188e4c5bd42b81f59e.png" srcset="/img/loading.gif" lazyload alt="在这里插入图片描述"></p>
<h1 id="3-let-、const"><a href="#3-let-、const" class="headerlink" title="3. let  、const"></a>3. let  、const</h1><p>let 是 ES6 新推出的数据类型，let 用于声明变量，若不赋值，则默认为 undefined 类型</p>
<ol>
<li><p>变量不能重复声明</p>
</li>
<li><p>块级作用域，相当于局部变量</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs javascript">&#123;<br>   <span class="hljs-keyword">let</span> name = <span class="hljs-string">&#x27;uni&#x27;</span> <br>&#125;<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(name)	<span class="hljs-comment">// 报错, 无法访问</span><br></code></pre></td></tr></table></figure>
<p>这里包括但不限于 if、else、while、for 、funtion 所包含的 { } </p>
</li>
<li><p>不存在变量提升，不允许在变量声明前就去使用</p>
</li>
<li><p>不影响作用域链，所在作用域的内部函数可以访问到变量</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> name = <span class="hljs-string">&#x27;uni&#x27;</span>;<br><span class="hljs-keyword">function</span> <span class="hljs-title function_">fn</span>(<span class="hljs-params"></span>)&#123;<br>   <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(name); <br>&#125;<br><span class="hljs-title function_">fn</span>();<br></code></pre></td></tr></table></figure></li>
</ol>
<p><strong>const 用于声明常量</strong></p>
<ol>
<li><p>在定义时必须赋值初始值</p>
</li>
<li><p>一般常量使用大写</p>
</li>
<li><p>常量的值不能修改</p>
</li>
<li><p>块级作用域</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs javascript">&#123;<br>   <span class="hljs-keyword">const</span> <span class="hljs-variable constant_">NAME</span> = <span class="hljs-string">&#x27;uni&#x27;</span> <br>&#125;<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-variable constant_">NAME</span>)	<span class="hljs-comment">// 报错</span><br></code></pre></td></tr></table></figure>
</li>
<li><p>支持对数组类型修改</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">const</span> users = []<br>users.<span class="hljs-title function_">puth</span>(<span class="hljs-string">&#x27;uni&#x27;</span>)<br></code></pre></td></tr></table></figure></li>
</ol>
<h1 id="4-解构赋值"><a href="#4-解构赋值" class="headerlink" title="4. 解构赋值"></a>4. 解构赋值</h1><p>解构赋值：ES6 允许按照一定模式从数组和对象中提取值，对变量进行赋值<br>解构赋值一般分为数组和对象这两种<br>【例】对数组进行解构赋值</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">const</span> words = [<span class="hljs-string">&#x27;a&#x27;</span>, <span class="hljs-string">&#x27;b&#x27;</span>, <span class="hljs-string">&#x27;c&#x27;</span>]<br><span class="hljs-keyword">let</span> [a, b, c] = words<br><span class="hljs-comment">// a = &#x27;a&#x27;</span><br><span class="hljs-comment">// b = &#x27;b&#x27;</span><br><span class="hljs-comment">// c = &#x27;c&#x27;</span><br></code></pre></td></tr></table></figure>
<p>【例】对对象进行解构赋值</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">const</span> user=&#123;<br>   <span class="hljs-attr">id</span>: <span class="hljs-number">1</span>,<br>   <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;uni&#x27;</span>,<br>   <span class="hljs-attr">say</span>: <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;<br>      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">`name: <span class="hljs-subst">$&#123;name&#125;</span>, id: <span class="hljs-subst">$&#123;id&#125;</span>`</span>)<br>   &#125;<br>&#125;<br><span class="hljs-keyword">let</span> &#123;id, name, say&#125; = user;<br><span class="hljs-title function_">say</span>()<br></code></pre></td></tr></table></figure>
<h1 id="5-模板字符串"><a href="#5-模板字符串" class="headerlink" title="5. 模板字符串"></a>5. 模板字符串</h1><p>使用 <code> </code>反引号，支持使用 ${} 取值，例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> name = <span class="hljs-string">&#x27;uni&#x27;</span><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">`name: <span class="hljs-subst">$&#123;name&#125;</span>`</span>)<br></code></pre></td></tr></table></figure>

<h1 id="6-对象的简化写法"><a href="#6-对象的简化写法" class="headerlink" title="6. 对象的简化写法"></a>6. 对象的简化写法</h1><p>ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> name = <span class="hljs-string">&#x27;uni&#x27;</span><br><span class="hljs-keyword">let</span> say = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;<br>   <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">`name: <span class="hljs-subst">$&#123;uni&#125;</span>`</span>)<br>&#125;<br><span class="hljs-keyword">const</span> uni = &#123;name, say&#125;<br><span class="hljs-comment">// 相当于: const uni = &#123;name: name, say: say&#125;</span><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(uni)<br></code></pre></td></tr></table></figure>

<h1 id="7-箭头函数"><a href="#7-箭头函数" class="headerlink" title="7. 箭头函数"></a>7. 箭头函数</h1><p>ES6 允许使用 <code>=&gt;</code>箭头 定义函数<br>【例】定义求和函数</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> <span class="hljs-title function_">fn</span> = (<span class="hljs-params">a, b</span>) =&gt; &#123; <span class="hljs-keyword">return</span> a + b &#125; <br></code></pre></td></tr></table></figure>
<p>箭头函数的特性：</p>
<ol>
<li>this 是静态的，this 始终指向函数声明时所在作用域下的 this 的值</li>
</ol>
<p>【例】直接调用两种定义方式的函数</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">function</span> <span class="hljs-title function_">getName</span>(<span class="hljs-params"></span>)&#123;<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">name</span>)<br>&#125;<br><span class="hljs-keyword">function</span> <span class="hljs-title function_">getName2</span>(<span class="hljs-params"></span>)&#123;<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">name</span>); <br>&#125;<br><span class="hljs-variable language_">window</span>.<span class="hljs-property">name</span> = <span class="hljs-string">&#x27;uni&#x27;</span>,<br><span class="hljs-keyword">const</span> school = &#123;<br>   <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;UNI&#x27;</span> <br>&#125;<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title function_">getName</span>())<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title function_">getName2</span>())<br></code></pre></td></tr></table></figure>
<blockquote>
<p>运行结果<br>uni<br>uni</p>
</blockquote>
<p>例，使用 call 来改变函数的this</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs javascript">getName.<span class="hljs-title function_">call</span>(school)<br>getName2.<span class="hljs-title function_">call</span>(school)<br></code></pre></td></tr></table></figure>
<blockquote>
<p>运行结果<br>UNI<br>UNI</p>
</blockquote>
<ol start="2">
<li>不能作为构造实例化对象</li>
</ol>
<p>【例】箭头函数的错误使用</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> <span class="hljs-title function_">Person</span> = (<span class="hljs-params">name, age</span>) =&gt; &#123;<br>  <span class="hljs-variable language_">this</span>.<span class="hljs-property">name</span> = name<br>  <span class="hljs-variable language_">this</span>.<span class="hljs-property">age</span> = age<br>&#125;<br><span class="hljs-keyword">let</span> uni = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Person</span>(<span class="hljs-string">&#x27;uni&#x27;</span>, <span class="hljs-number">22</span>)<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(uni)		<span class="hljs-comment">// 报错</span><br></code></pre></td></tr></table></figure>

<ol start="3">
<li><p>不能使用 arguments 变量</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> <span class="hljs-title function_">fn</span> = (<span class="hljs-params"></span>) =&gt; &#123;<br>  <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-variable language_">arguments</span>);<br>&#125;<br></code></pre></td></tr></table></figure>
</li>
<li><p>箭头函数可简写</p>
</li>
</ol>
<ul>
<li>当形参只有一个时可省略小括号</li>
</ul>
<p>简写前</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> <span class="hljs-title function_">abs</span> = (<span class="hljs-params">a</span>) =&gt; &#123;<br>  <span class="hljs-keyword">if</span>(a &lt; <span class="hljs-number">0</span>)<br>    <span class="hljs-keyword">return</span> -a;<br>  <span class="hljs-keyword">else</span> <br>    <span class="hljs-keyword">return</span> a;<br>&#125;<br></code></pre></td></tr></table></figure>

<p>简写后</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> <span class="hljs-title function_">abs</span> = a =&gt; &#123;<br>  <span class="hljs-keyword">if</span>(a &lt; <span class="hljs-number">0</span>)<br>    <span class="hljs-keyword">return</span> -a;<br>  <span class="hljs-keyword">else</span> <br>    <span class="hljs-keyword">return</span> a;<br>&#125;<br></code></pre></td></tr></table></figure>

<ul>
<li>省略花括号，当代码只有一条语句时，此时的 return  必须省略，语句执行结果即为函数返回值<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">// 简写前</span><br><span class="hljs-keyword">let</span> <span class="hljs-title function_">pow</span> = (<span class="hljs-params">n</span>) =&gt; &#123;<br>   <span class="hljs-keyword">return</span> n * n <br>&#125;<br><span class="hljs-comment">// 简写后</span><br><span class="hljs-keyword">let</span> <span class="hljs-title function_">pow2</span> = n =&gt; n * n<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title function_">pow</span>(<span class="hljs-number">1</span>)<br></code></pre></td></tr></table></figure></li>
</ul>
<p>使用场景：</p>
<ol>
<li>适合与 this 无关的回调，例如定时器，数组的方法等回调</li>
<li>不适合与 this 有关的回调，事件回调</li>
</ol>
<h1 id="8-函数参数初始值"><a href="#8-函数参数初始值" class="headerlink" title="8. 函数参数初始值"></a>8. 函数参数初始值</h1><p>ES6 允许给函数参数赋值默认值，经常与解构赋值结合使用<br>【例】</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">function</span> <span class="hljs-title function_">connect</span>(<span class="hljs-params">&#123;</span><br><span class="hljs-params">  host=<span class="hljs-string">&quot;127.0.0.1&quot;</span>,</span><br><span class="hljs-params">  username,</span><br><span class="hljs-params">  password,</span><br><span class="hljs-params">  port</span><br><span class="hljs-params">&#125;</span>)<br><span class="hljs-title function_">connect</span>(&#123;<span class="hljs-attr">username</span>: <span class="hljs-string">&#x27;root&#x27;</span>, <span class="hljs-attr">password</span>: <span class="hljs-string">&#x27;root&#x27;</span>, <span class="hljs-attr">port</span>: <span class="hljs-number">3306</span>&#125;)<br></code></pre></td></tr></table></figure>

<h1 id="9-REST-参数"><a href="#9-REST-参数" class="headerlink" title="9. REST 参数"></a>9. REST 参数</h1><p>ES6 引入 REST 参数，用于获取函数的实参，用于代替 arguments</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">// ES5 获取实参的方式</span><br><span class="hljs-keyword">function</span> <span class="hljs-title function_">data</span>(<span class="hljs-params"></span>)&#123;<br>  <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-variable language_">arguments</span>);<br>&#125;<br><span class="hljs-title function_">data</span>(<span class="hljs-number">1</span>,<span class="hljs-number">2</span>,<span class="hljs-number">3</span>)<br><br><span class="hljs-comment">// ES6 使用 rest 参数</span><br><span class="hljs-keyword">function</span> <span class="hljs-title function_">data</span>(<span class="hljs-params">...args</span>)&#123;<br>   <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(args) <br>&#125;<br><span class="hljs-title function_">data</span>(<span class="hljs-number">1</span>,<span class="hljs-number">2</span>,<span class="hljs-number">3</span>)<br></code></pre></td></tr></table></figure>

<p>rest 参数必须要放到参数最后</p>
<h1 id="10-拓展运算符"><a href="#10-拓展运算符" class="headerlink" title="10. 拓展运算符"></a>10. 拓展运算符</h1><p>ES6 的扩展运算符能将数组转换为逗号分隔的参数序列</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">const</span> words = [<span class="hljs-string">&#x27;a&#x27;</span>, <span class="hljs-string">&#x27;b&#x27;</span>, <span class="hljs-string">&#x27;c&#x27;</span>]<br><br><span class="hljs-keyword">function</span> <span class="hljs-title function_">data</span>(<span class="hljs-params">...args</span>)&#123;<br>  <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(args)  <br>&#125;<br><span class="hljs-title function_">data</span>(...words)<br></code></pre></td></tr></table></figure>

<h1 id="11-Symbol-数据类型"><a href="#11-Symbol-数据类型" class="headerlink" title="11. Symbol 数据类型"></a>11. Symbol 数据类型</h1><h2 id="11-1-Symbol-类型的特点"><a href="#11-1-Symbol-类型的特点" class="headerlink" title="11.1 Symbol 类型的特点"></a>11.1 Symbol 类型的特点</h2><p>ES6 引入了一种新的基本数据类型 （第八种）Symbol，表示独一无二的值，类似于字符串。<br>Symbol 数据的类型的特点有：</p>
<ol>
<li>Symbol 的值是唯一的，用来解决命名冲突的问题</li>
<li>Symbol 值不能与其他数据进行运算</li>
<li>Symbol 定义的对象属性不能使用 for…in 循环遍历，但是可以使用 Reflect.ownKeys 来获取对象的所有键名</li>
</ol>
<h2 id="11-2-Symbol-类型的基本使用"><a href="#11-2-Symbol-类型的基本使用" class="headerlink" title="11.2 Symbol 类型的基本使用"></a>11.2 Symbol 类型的基本使用</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">// 1. 创建 Symbol</span><br><span class="hljs-keyword">let</span> s1 = <span class="hljs-title class_">Symbol</span>();<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(s1, <span class="hljs-keyword">typeof</span> s1) <span class="hljs-comment">// Symbol() &quot;symbol&quot;</span><br><span class="hljs-keyword">let</span> s2 = <span class="hljs-title class_">Symbol</span>(<span class="hljs-string">&#x27;uni&#x27;</span>)<br><span class="hljs-keyword">let</span> s3 = <span class="hljs-title class_">Symbol</span>(<span class="hljs-string">&#x27;uni&#x27;</span>)<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(s2 == s3) 	<span class="hljs-comment">// false</span><br></code></pre></td></tr></table></figure>
<p>Symbol.for(key) 方法会根据给定的键 key，来从运行时的 symbol 注册表中找到对应的 symbol，如果找到了，则返回它，否则，新建一个与该键关联的 symbol，并放入全局 symbol 注册表中。<br>【例】</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> s4 = <span class="hljs-title class_">Symbol</span>.<span class="hljs-title function_">for</span>(<span class="hljs-string">&#x27;hello&#x27;</span>)<br><span class="hljs-keyword">let</span> s5 = <span class="hljs-title class_">Symbol</span>.<span class="hljs-title function_">for</span>(<span class="hljs-string">&#x27;hello&#x27;</span>)<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(s4 === s5) <span class="hljs-comment">// true</span><br></code></pre></td></tr></table></figure>

<p>Symbol 可用于表示对象唯一的属性，例如：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> methods = &#123;<br>   <span class="hljs-attr">say1</span>: <span class="hljs-title class_">Symbol</span>(),<br>   <span class="hljs-attr">say2</span>: <span class="hljs-title class_">Symbol</span>()<br>&#125;<br><span class="hljs-keyword">let</span> game = &#123;&#125;<br>game[methods.<span class="hljs-property">say1</span>] = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123; <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;say1&#x27;</span>); &#125;<br>game[methods.<span class="hljs-property">say2</span>] = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123; <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;say2&#x27;</span>); &#125;<br><br>game[methods.<span class="hljs-property">say1</span>]()<br></code></pre></td></tr></table></figure>

<p>除了上述这种方法，先定义包含 Symbol() 属性的对象外，还有更简化的方法，直接在定义方法时创建 Symbol 对象，例如：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><br><span class="hljs-keyword">let</span> game = &#123;<br>  [<span class="hljs-title class_">Symbol</span>(<span class="hljs-string">&#x27;say1&#x27;</span>)]: <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123; <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;say1&#x27;</span>); &#125;,<br>  [<span class="hljs-title class_">Symbol</span>(<span class="hljs-string">&#x27;say2&#x27;</span>)]: <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123; <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;say2&#x27;</span>); &#125;<br>&#125;<br><span class="hljs-comment">// 这里的 Symbol(&#x27;say1&#x27;) 无法调用，通常是使用 Symbol 的内置属性来代替</span><br></code></pre></td></tr></table></figure>
<h2 id="11-3-Symbol-内置属性"><a href="#11-3-Symbol-内置属性" class="headerlink" title="11.3 Symbol 内置属性"></a>11.3 Symbol 内置属性</h2><p>除了定义自己使用的 Symbol 值意外， ES6 还提供了 11个内置的 Symbol 值，指向语言内部使用的方法，等用到的时候可以查看文档<br>参考资料：<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol">https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects&#x2F;Symbol</a><br>在 Symbol 的这些内置属性中，比较关键的就是 iterator 迭代器<br><code>Symbol.iterator</code> 为每一个对象定义了默认的迭代器。该迭代器可以被 for…of 循环使用。</p>
<h1 id="12-迭代器"><a href="#12-迭代器" class="headerlink" title="12. 迭代器"></a>12. 迭代器</h1><p>迭代器 （Iterator）是一种接口，为各种不同的数据类型提供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作。</p>
<ol>
<li>ES6 创造了一种新的遍历命令 for … of 循环， iterator 接口主要供 for… of 消费</li>
<li>原生具备了 iterator 接口的数据（可用 for of 遍历）</li>
</ol>
<ul>
<li>Array</li>
<li>Arguments</li>
<li>Set</li>
<li>Map</li>
<li>String</li>
<li>TypeArray</li>
<li>NodeList</li>
</ul>
<ol start="3">
<li>工作原理</li>
</ol>
<ul>
<li>创建一个指针对象，指向当前数据结构的起始位置</li>
<li>第一次调用对象的 next 方法，指针一直往后移动，直到指向最后一个成员</li>
<li>接下来不断调用 next 方法，指针一直往后移动，直到指向最后一个成员</li>
<li>每当调用 next() 方法，就会返回一个包含 value 和 done 属性的对象</li>
</ul>
<p>【例】</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">const</span> words = [<span class="hljs-string">&#x27;a&#x27;</span>, <span class="hljs-string">&#x27;b&#x27;</span>, <span class="hljs-string">&#x27;c&#x27;</span>]<br><br><span class="hljs-keyword">for</span>(<span class="hljs-keyword">let</span> word <span class="hljs-keyword">of</span> words)&#123;<br>   <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(word) <br>&#125;<br><span class="hljs-comment">// a</span><br><span class="hljs-comment">// b</span><br><span class="hljs-comment">// c</span><br></code></pre></td></tr></table></figure>
<p>通过输出一个空的数组，我们可以观察到其原型对象支持迭代遍历的实现对象</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-keyword">new</span> <span class="hljs-title class_">Array</span>())<br></code></pre></td></tr></table></figure>
<p>运行的部分结果：<br><img src="https://img-blog.csdnimg.cn/9b299a0d7f7d459e8b6285cf6cf9a815.png" srcset="/img/loading.gif" lazyload alt="在这里插入图片描述"></p>
<p>可以看到在 Array 类型数据的 prototype 原型对象中，包含了 Symbol 类型的属性名，其值为一个 values() 函数<br>【例】遍历数组的迭代器</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs javascript">a = [<span class="hljs-number">1</span>,<span class="hljs-number">2</span>,<span class="hljs-number">3</span>]<br><br><span class="hljs-keyword">let</span> iterator = a[<span class="hljs-title class_">Symbol</span>.<span class="hljs-property">iterator</span>]()<br><span class="hljs-comment">// 调用对象的 next</span><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(iterator.<span class="hljs-title function_">next</span>())<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(iterator.<span class="hljs-title function_">next</span>())<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(iterator.<span class="hljs-title function_">next</span>())<br></code></pre></td></tr></table></figure>
<p>运行结果：<br><img src="https://img-blog.csdnimg.cn/d68a07a3a7954736b1df9c10f5abdff8.png" srcset="/img/loading.gif" lazyload alt="在这里插入图片描述"></p>
<h2 id="12-1-自定义迭代器"><a href="#12-1-自定义迭代器" class="headerlink" title="12.1 自定义迭代器"></a>12.1 自定义迭代器</h2><p>自定义迭代器分为两步，1）声明 Symbol.iterator 属性，值为 一个函数，2）该函数需返回 next()方法<br>【例】实现只遍历长度 &gt;&#x3D; 2 的字符串数据，其他则为 undefined</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">const</span> users = &#123;<br>  <span class="hljs-attr">data</span>: [<span class="hljs-string">&#x27;aa&#x27;</span>, <span class="hljs-string">&#x27;bb&#x27;</span>, <span class="hljs-string">&#x27;cc&#x27;</span>, <span class="hljs-string">&#x27;A&#x27;</span>, <span class="hljs-string">&#x27;1&#x27;</span>, <span class="hljs-string">&#x27;DD&#x27;</span>],<br>  [<span class="hljs-title class_">Symbol</span>.<span class="hljs-property">iterator</span>]()&#123;<br>     <span class="hljs-comment">// 索引变量</span><br>     <span class="hljs-keyword">let</span> index = <span class="hljs-number">0</span><br>     <span class="hljs-keyword">let</span> _this = <span class="hljs-variable language_">this</span><br>     <span class="hljs-keyword">return</span> &#123;<br>        <span class="hljs-attr">next</span>: <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;<br>            <span class="hljs-keyword">if</span>(index &gt;= _this.<span class="hljs-property">data</span>.<span class="hljs-property">length</span>) 	<span class="hljs-comment">// 若索引不合理, 则迭代结束</span><br>              <span class="hljs-keyword">return</span> &#123; <span class="hljs-attr">value</span>: <span class="hljs-literal">undefined</span>, <span class="hljs-attr">done</span>: <span class="hljs-literal">true</span> &#125;<br>          <br>            <span class="hljs-keyword">if</span>(_this.<span class="hljs-property">data</span>[index].<span class="hljs-property">length</span> &gt;= <span class="hljs-number">2</span>)<br>               <span class="hljs-keyword">return</span> &#123; <span class="hljs-attr">value</span>: _this.<span class="hljs-property">data</span>[index++], <span class="hljs-attr">done</span>: <span class="hljs-literal">false</span> &#125;<br>            <span class="hljs-keyword">else</span>&#123;<br>               index++<br>               <span class="hljs-keyword">return</span> &#123; <span class="hljs-attr">value</span>: <span class="hljs-literal">undefined</span>, <span class="hljs-attr">done</span>: <span class="hljs-literal">false</span> &#125;<br>            &#125;<br>            <br>        &#125;<br>     &#125;<br>  &#125;<br>&#125;<br><span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> u <span class="hljs-keyword">of</span> users)&#123; <br>  <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(u)<br>&#125;<br></code></pre></td></tr></table></figure>

<h1 id="13-生成器"><a href="#13-生成器" class="headerlink" title="13. 生成器"></a>13. 生成器</h1><p>生成器函数是 ES6 提供的一种异步编程的解决方案，语法行为与传统函数完全不同，例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">function</span> * <span class="hljs-title function_">gen</span>(<span class="hljs-params"></span>)&#123;<br>  <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-number">1</span>);<br>  <span class="hljs-keyword">yield</span> <span class="hljs-string">&#x27;1&#x27;</span>;	<span class="hljs-comment">// 类似于断点</span><br>  <br>  <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-number">2</span>);<br>  <span class="hljs-keyword">yield</span> <span class="hljs-string">&#x27;2&#x27;</span>;<br>  <br>  <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-number">3</span>);<br>  <span class="hljs-keyword">yield</span> <span class="hljs-string">&#x27;3&#x27;</span>;<br>  <br>&#125;<br><span class="hljs-keyword">let</span> iterator = <span class="hljs-title function_">gen</span>();<br>iterator.<span class="hljs-title function_">next</span>();<br>iterator.<span class="hljs-title function_">next</span>();<br>iterator.<span class="hljs-title function_">next</span>();<br></code></pre></td></tr></table></figure>
<h2 id="13-1-生成器函数的参数传递"><a href="#13-1-生成器函数的参数传递" class="headerlink" title="13.1 生成器函数的参数传递"></a>13.1 生成器函数的参数传递</h2><p>调用 生成器函数的 next()方法时，方法里传递的参数会作为函数执行 yield 方法后的返回值</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">function</span> * <span class="hljs-title function_">gen</span>(<span class="hljs-params">arg</span>)&#123;<br>  <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(arg);<br>  <span class="hljs-keyword">let</span> aaa = <span class="hljs-keyword">yield</span> <span class="hljs-number">1</span><br>  <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(aaa)<br>  <span class="hljs-keyword">let</span> bbb = <span class="hljs-keyword">yield</span> <span class="hljs-number">2</span><br>  <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(bbb)<br>  <span class="hljs-keyword">let</span> ccc = <span class="hljs-keyword">yield</span> <span class="hljs-number">3</span><br>  <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(ccc)<br>&#125;<br><span class="hljs-keyword">let</span> iterator = <span class="hljs-title function_">gen</span>(<span class="hljs-string">&#x27;hi&#x27;</span>)<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(iterator.<span class="hljs-title function_">next</span>(<span class="hljs-string">&#x27;aaa&#x27;</span>))<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(iterator.<span class="hljs-title function_">next</span>(<span class="hljs-string">&#x27;bbb&#x27;</span>))<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(iterator.<span class="hljs-title function_">next</span>(<span class="hljs-string">&#x27;ccc&#x27;</span>))<br></code></pre></td></tr></table></figure>
<p>运行结果：<br><img src="https://img-blog.csdnimg.cn/4413d9d706ce47acaac7872b06105c4f.png" srcset="/img/loading.gif" lazyload alt="在这里插入图片描述"></p>
<h2 id="13-2-生成器实例"><a href="#13-2-生成器实例" class="headerlink" title="13.2 生成器实例"></a>13.2 生成器实例</h2><p><strong>了解回调地狱 callback hell</strong></p>
<p>参考资料：<a target="_blank" rel="noopener" href="http://callbackhell.com/">http://callbackhell.com/</a><br>回调：使用 JavaScript 函数的约定的名称，通常在执行 I&#x2F;O时实行，例如下载文件，读取文件，数据库连接等。</p>
<p>回调通常发生在 异步 async 操作中，异步是指多个操作同时进行，常见的有 setTimeout 延时函数 和 AJAX 发送请求等</p>
<p>回调地狱：回调函数中又嵌套了一个或多个回调，例：在3秒内分别输出3, 2,1</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =&gt;</span> &#123;<br>  <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-number">3</span>)<br>  <span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =&gt;</span> &#123;<br>     <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-number">2</span>) <br>     <span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =&gt;</span> &#123;<br>        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-number">1</span>) <br>     &#125;, <span class="hljs-number">1000</span>)<br>  &#125;, <span class="hljs-number">1000</span>)<br>&#125;, <span class="hljs-number">1000</span>)<br></code></pre></td></tr></table></figure>

<p>使用生成器函数可以解决回调地狱的问题：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">function</span> <span class="hljs-title function_">one</span>(<span class="hljs-params"></span>)&#123;<br>  <span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =&gt;</span> &#123;<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-number">1</span>)<br>  &#125;, <span class="hljs-number">3000</span>)<br>&#125;<br><br><span class="hljs-keyword">function</span> <span class="hljs-title function_">two</span>(<span class="hljs-params"></span>)&#123;<br>   <span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =&gt;</span> &#123;<br>     <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-number">2</span>) <br>   &#125;, <span class="hljs-number">2000</span>)<br>&#125;<br><br><span class="hljs-keyword">function</span> <span class="hljs-title function_">three</span>(<span class="hljs-params"></span>)&#123;<br>    <span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =&gt;</span> &#123;<br>      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-number">3</span>) <br>    &#125;, <span class="hljs-number">1000</span>)<br>&#125;<br><br><span class="hljs-keyword">function</span> * <span class="hljs-title function_">gen</span>(<span class="hljs-params"></span>)&#123;<br>  <span class="hljs-keyword">yield</span> <span class="hljs-title function_">three</span>();<br>  <span class="hljs-keyword">yield</span> <span class="hljs-title function_">two</span>();<br>  <span class="hljs-keyword">yield</span> <span class="hljs-title function_">one</span>();<br>&#125;<br><span class="hljs-keyword">let</span> iterator = <span class="hljs-title function_">gen</span>()<br>iterator.<span class="hljs-title function_">next</span>()<br>iterator.<span class="hljs-title function_">next</span>()<br>iterator.<span class="hljs-title function_">next</span>()<br></code></pre></td></tr></table></figure>

<p>返回值具有关联的回调地狱如何解决呢？比如要先后获取用户数据、订单数据和商品数据</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">function</span> <span class="hljs-title function_">getUsers</span>(<span class="hljs-params"></span>)&#123;<br>  <span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =&gt;</span> &#123;<br>    <span class="hljs-keyword">let</span> data = <span class="hljs-string">&#x27;用户数据&#x27;</span><br>    iterator.<span class="hljs-title function_">next</span>(data)<br>  &#125;, <span class="hljs-number">3000</span>)<br>&#125;<br><br><span class="hljs-keyword">function</span> <span class="hljs-title function_">getOrders</span>(<span class="hljs-params"></span>)&#123;<br>   <span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =&gt;</span> &#123;<br>     <span class="hljs-keyword">let</span> data = <span class="hljs-string">&#x27;订单数据&#x27;</span><br>     iterator.<span class="hljs-title function_">next</span>(data)<br>   &#125;, <span class="hljs-number">2000</span>)<br>&#125;<br><br><span class="hljs-keyword">function</span> <span class="hljs-title function_">getGoods</span>(<span class="hljs-params"></span>)&#123;<br>    <span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =&gt;</span> &#123;<br>      <span class="hljs-keyword">let</span> data = <span class="hljs-string">&#x27;商品数据&#x27;</span><br>      iterator.<span class="hljs-title function_">next</span>(data)<br>    &#125;, <span class="hljs-number">1000</span>)<br>&#125;<br><br><span class="hljs-keyword">function</span> * <span class="hljs-title function_">gen</span>(<span class="hljs-params"></span>)&#123;<br>  <span class="hljs-keyword">let</span> users = <span class="hljs-keyword">yield</span> <span class="hljs-title function_">getUsers</span>();<br>  <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(users)<br>  <span class="hljs-keyword">let</span> orders = <span class="hljs-keyword">yield</span> <span class="hljs-title function_">getOrders</span>();<br>  <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(orders)<br>  <span class="hljs-keyword">let</span> goods = <span class="hljs-keyword">yield</span> <span class="hljs-title function_">getGoods</span>();<br>  <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(goods)<br>&#125;<br><span class="hljs-keyword">let</span> iterator = <span class="hljs-title function_">gen</span>()<br>iterator.<span class="hljs-title function_">next</span>()<br></code></pre></td></tr></table></figure>


<h1 id="14-Promise"><a href="#14-Promise" class="headerlink" title="14. Promise"></a>14. Promise</h1><p>Promise  是 ES6 引入的异步编程的新解决方案。语法上 Promise 是一个构造函数，用来封装异步操作并可以获取其成功或失败的结果。</p>
<ol>
<li>Promise 构造函数：Promise(excutor) { }</li>
<li>Promise.prototype.then 方法</li>
<li>Promise.prototype.catch 方法</li>
</ol>
<p>promise 译为 承诺，里面主要有 resolve 决定 和 reject 拒绝 这两个行为</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">// 定义 Promise</span><br><span class="hljs-keyword">const</span> p = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Promise</span>(<span class="hljs-keyword">function</span>(<span class="hljs-params">resolve, reject</span>)&#123;<br>    <span class="hljs-keyword">if</span>(...)<br>      <span class="hljs-title function_">reject</span>(a)<br>    <span class="hljs-keyword">else</span><br>      <span class="hljs-title function_">resolve</span>(b)<br>&#125;<br><br><span class="hljs-comment">// 使用 Promise</span><br>p.<span class="hljs-title function_">then</span>(<br>   <span class="hljs-function">(<span class="hljs-params">a</span>) =&gt;</span> &#123;&#125;,<br>   <span class="hljs-function">(<span class="hljs-params">b</span>) =&gt;</span> &#123;&#125;<br>).<span class="hljs-title function_">catch</span>(<span class="hljs-function"><span class="hljs-params">error</span> =&gt;</span> &#123;&#125;) 	<span class="hljs-comment">// 捕获异常</span><br></code></pre></td></tr></table></figure>

<h2 id="14-1-使用-Promise-封装-AJAX-请求"><a href="#14-1-使用-Promise-封装-AJAX-请求" class="headerlink" title="14.1 使用 Promise 封装 AJAX 请求"></a>14.1 使用 Promise 封装 AJAX 请求</h2><p>需要node环境，使用node命令执行下方的 JS代码<br>原生的 AJAX 异步请求实现</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><br><span class="hljs-keyword">var</span> <span class="hljs-title class_">XMLHttpRequest</span> = <span class="hljs-built_in">require</span>(<span class="hljs-string">&#x27;xmlhttprequest&#x27;</span>).<span class="hljs-property">XMLHttpRequest</span>;<br><span class="hljs-comment">// 该 API 接口可以随机返回一条诗句</span><br><span class="hljs-keyword">const</span> url = <span class="hljs-string">&#x27;https://api.apiopen.top/api/sentences&#x27;</span><br><span class="hljs-comment">// 1. 创建对象</span><br><span class="hljs-keyword">const</span> xhr = <span class="hljs-keyword">new</span> <span class="hljs-title class_">XMLHttpRequest</span>();<br><span class="hljs-comment">// 2. 初始化</span><br>xhr.<span class="hljs-title function_">open</span>(<span class="hljs-string">&quot;GET&quot;</span>, url)<br><span class="hljs-comment">// 3. 发送</span><br>xhr.<span class="hljs-title function_">send</span>()<br><span class="hljs-comment">// 4. 绑定事件，处理响应结果</span><br>xhr.<span class="hljs-property">onreadystatechange</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;<br>   <span class="hljs-keyword">if</span>(xhr.<span class="hljs-property">readyState</span> === <span class="hljs-number">4</span>)&#123;<br>      <span class="hljs-comment">// 判断状态响应码</span><br>      <span class="hljs-keyword">if</span>(xhr.<span class="hljs-property">status</span> &gt;= <span class="hljs-number">200</span> &amp;&amp; xhr.<span class="hljs-property">status</span> &lt; <span class="hljs-number">300</span>)&#123;  <span class="hljs-comment">// 成功</span><br>         <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(xhr.<span class="hljs-property">responseText</span>) <br>      &#125; <span class="hljs-keyword">else</span>&#123;																			<span class="hljs-comment">// 失败</span><br>         <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">error</span>(xhr.<span class="hljs-property">status</span>)<br>      &#125;<br>   &#125;<br>&#125;<br></code></pre></td></tr></table></figure>
<blockquote>
<p>运行结果<br>{“code”:200,”message”:”成功!”,”result”:{“name”:”河海不择细流，故能就其深<br>；”,”from”:”李斯《谏逐客书》”}}</p>
</blockquote>
<p>使用 Promise 封装原生的 AJAX 请求</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><br><span class="hljs-keyword">var</span> <span class="hljs-title class_">XMLHttpRequest</span> = <span class="hljs-built_in">require</span>(<span class="hljs-string">&#x27;xmlhttprequest&#x27;</span>).<span class="hljs-property">XMLHttpRequest</span>;<br><br><span class="hljs-comment">// 定义 Promise</span><br><span class="hljs-keyword">const</span> p = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve, reject</span>) =&gt;</span> &#123;<br>    <span class="hljs-keyword">const</span> url = <span class="hljs-string">&#x27;https://api.apiopen.top/api/sentences&#x27;</span><br>    <span class="hljs-comment">// 1. 创建对象</span><br>    <span class="hljs-keyword">const</span> xhr = <span class="hljs-keyword">new</span> <span class="hljs-title class_">XMLHttpRequest</span>();<br>    <span class="hljs-comment">// 2. 初始化</span><br>    xhr.<span class="hljs-title function_">open</span>(<span class="hljs-string">&quot;GET&quot;</span>, url)<br>    <span class="hljs-comment">// 3. 发送</span><br>    xhr.<span class="hljs-title function_">send</span>()<br>    <span class="hljs-comment">// 4. 绑定事件，处理响应结果</span><br>    xhr.<span class="hljs-property">onreadystatechange</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;<br>        <span class="hljs-keyword">if</span>(xhr.<span class="hljs-property">readyState</span> === <span class="hljs-number">4</span>)&#123;<br>            <span class="hljs-comment">// 判断状态响应码</span><br>            <span class="hljs-keyword">if</span>(xhr.<span class="hljs-property">status</span> &gt;= <span class="hljs-number">200</span> &amp;&amp; xhr.<span class="hljs-property">status</span> &lt; <span class="hljs-number">300</span>)&#123;  <span class="hljs-comment">// 成功</span><br>                <span class="hljs-title function_">resolve</span>(xhr.<span class="hljs-property">responseText</span>) <br>            &#125; <span class="hljs-keyword">else</span>&#123;																			<span class="hljs-comment">// 失败</span><br>                <span class="hljs-title function_">reject</span>(xhr.<span class="hljs-property">status</span>)<br>            &#125;<br>        &#125;<br>    &#125;<br>&#125;)<br><span class="hljs-comment">// 调用 Promise</span><br>p.<span class="hljs-title function_">then</span>(<br>    <span class="hljs-function">(<span class="hljs-params">result</span>) =&gt;</span> &#123;<br>        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;请求成功&#x27;</span>, result)<br>    &#125;,<br>    <span class="hljs-function">(<span class="hljs-params">reason</span>) =&gt;</span> &#123;<br>        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;请求失败&#x27;</span>, reason)<br>    &#125;<br>).<span class="hljs-title function_">catch</span>(<span class="hljs-function">(<span class="hljs-params">error</span>) =&gt;</span> &#123;<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">error</span>(<span class="hljs-string">&#x27;程序出错&#x27;</span>, error)<br>&#125;)<br></code></pre></td></tr></table></figure>

<h1 id="15-Set"><a href="#15-Set" class="headerlink" title="15. Set"></a>15. Set</h1><p>ES6 提供了新的数据结构 Set（集合），类似于数组，其内部的值都是唯一的。<br>Set 集合实现了 iterator 接口，所以可使用 for…of 进行遍历<br>集合的属性和方法：</p>
<ol>
<li>size，返回集合的元素个数</li>
<li>add，增加一个新元素，返回当前集合</li>
<li>delete，删除元素，返回 boolean 的值</li>
<li>has，检测集合中是否包含某个元素，返回 boolean 的值</li>
<li>clear，清空集合</li>
</ol>
<p>【例1】使用 Set 去重</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> arr = [<span class="hljs-number">1</span>,<span class="hljs-number">1</span>,<span class="hljs-number">2</span>,<span class="hljs-number">2</span>,<span class="hljs-number">2</span>,<span class="hljs-number">3</span>,<span class="hljs-number">3</span>]<br><span class="hljs-keyword">let</span> result = [...<span class="hljs-keyword">new</span> <span class="hljs-title class_">Set</span>(arr )];<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(result);<br></code></pre></td></tr></table></figure>
<p>【例2】 使用 Set 求两个数组的交集</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> arr1 = [<span class="hljs-number">1</span>,<span class="hljs-number">1</span>,<span class="hljs-number">2</span>,<span class="hljs-number">2</span>,<span class="hljs-number">2</span>,<span class="hljs-number">3</span>,<span class="hljs-number">3</span>]<br><span class="hljs-keyword">let</span> arr2 = [<span class="hljs-number">3</span>,<span class="hljs-number">3</span>,<span class="hljs-number">2</span>]<br><span class="hljs-keyword">let</span> result = [...<span class="hljs-keyword">new</span> <span class="hljs-title class_">Set</span>(arr1)].<span class="hljs-title function_">filter</span>(<br>    <span class="hljs-function"><span class="hljs-params">item</span> =&gt;</span> &#123;<br>        <span class="hljs-keyword">let</span> a2 = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Set</span>(arr2)<br>        <span class="hljs-keyword">if</span>(a2.<span class="hljs-title function_">has</span>(item))<br>            <span class="hljs-keyword">return</span> <span class="hljs-literal">true</span><br>        <span class="hljs-keyword">else</span> <br>            <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span><br>    &#125;<br>)<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(result)<br></code></pre></td></tr></table></figure>
<p>简化写法</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> result = [...<span class="hljs-keyword">new</span> <span class="hljs-title class_">Set</span>(arr1)].<span class="hljs-title function_">filter</span>(<span class="hljs-function"><span class="hljs-params">item</span> =&gt;</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Set</span>(arr2).<span class="hljs-title function_">has</span>(item)); <br></code></pre></td></tr></table></figure>
<p>【例3】 使用 Set 求两个数组的并集</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> arr1 = [<span class="hljs-number">1</span>,<span class="hljs-number">1</span>,<span class="hljs-number">2</span>,<span class="hljs-number">2</span>,<span class="hljs-number">2</span>,<span class="hljs-number">3</span>,<span class="hljs-number">3</span>]<br><span class="hljs-keyword">let</span> arr2 = [<span class="hljs-number">3</span>,<span class="hljs-number">3</span>,<span class="hljs-number">2</span>]<br><span class="hljs-keyword">let</span> result = [...<span class="hljs-keyword">new</span> <span class="hljs-title class_">Set</span>([...arr1, ...arr2])]<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(result)<br></code></pre></td></tr></table></figure>
<p>【例4】使用 Set 求两个数组的差集</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> arr1 = [<span class="hljs-number">1</span>,<span class="hljs-number">1</span>,<span class="hljs-number">2</span>,<span class="hljs-number">2</span>,<span class="hljs-number">2</span>,<span class="hljs-number">3</span>,<span class="hljs-number">3</span>]<br><span class="hljs-keyword">let</span> arr2 = [<span class="hljs-number">3</span>,<span class="hljs-number">3</span>,<span class="hljs-number">2</span>]<br><br><span class="hljs-keyword">let</span> diff = [...<span class="hljs-keyword">new</span> <span class="hljs-title class_">Set</span>(arr1)].<span class="hljs-title function_">filter</span>(<span class="hljs-function"><span class="hljs-params">item</span> =&gt;</span> !(<span class="hljs-keyword">new</span> <span class="hljs-title class_">Set</span>(arr2).<span class="hljs-title function_">has</span>(item)))<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(diff)<br></code></pre></td></tr></table></figure>
<h1 id="16-Map"><a href="#16-Map" class="headerlink" title="16. Map"></a>16. Map</h1><p>ES6 提供了 Map 数据结构，类似于 Object，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当做键。Map也实现了 iterator 接口，所以可以使用 for…of 进行遍历，Map 的常用方法有：</p>
<ol>
<li>size，返回 Map 的元素个数</li>
<li>set，增加新元素，返回当前的 Map</li>
<li>get，返回指定键的值</li>
<li>has，检测 Map 中是否包含某个元素，返回结果为 boolean 类型</li>
<li>clear，清空集合，返回 undefined<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs javascript">map = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Map</span>()<br>map.<span class="hljs-title function_">set</span>(<span class="hljs-string">&#x27;name&#x27;</span>, <span class="hljs-string">&#x27;uni&#x27;</span>)<br>map.<span class="hljs-title function_">set</span>(<span class="hljs-string">&#x27;age&#x27;</span>, <span class="hljs-number">22</span>)<br><br><span class="hljs-keyword">for</span>(<span class="hljs-keyword">let</span> node <span class="hljs-keyword">of</span> map)&#123;<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;key=&#x27;</span>,node[<span class="hljs-number">0</span>], <span class="hljs-string">&#x27;,value=&#x27;</span>,node[<span class="hljs-number">1</span>])<br>&#125;<br></code></pre></td></tr></table></figure></li>
</ol>
<h1 id="17-Class"><a href="#17-Class" class="headerlink" title="17. Class"></a>17. Class</h1><p>ES6 引入了 Class 类的概念，作为对象的模板，通过 class 关键字可以定义类。基本上，ES6 的 class 可以看做一个语法糖，它的绝大部分功能， ES5 都可以做到，新的 class 写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。<br>知识点：</p>
<ol>
<li>class 声明类</li>
<li>constructor 定义构造函数初始化</li>
<li>extends 继承父类</li>
<li>super 调用父类构造方法</li>
<li>static 定义静态方法和属性</li>
<li>父类方法可以重写</li>
</ol>
<h2 id="17-1-Class-基本使用"><a href="#17-1-Class-基本使用" class="headerlink" title="17.1 Class 基本使用"></a>17.1 Class 基本使用</h2><p>【例】面向对象编程（ES5的写法）</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">function</span> <span class="hljs-title function_">User</span>(<span class="hljs-params">name, age</span>)&#123;<br>    <span class="hljs-variable language_">this</span>.<span class="hljs-property">name</span> = name;<br>    <span class="hljs-variable language_">this</span>.<span class="hljs-property">age</span> = age<br>&#125;<br><span class="hljs-comment">// 给类添加方法</span><br><span class="hljs-title class_">User</span>.<span class="hljs-property"><span class="hljs-keyword">prototype</span></span>.<span class="hljs-property">sayHello</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">`My name is <span class="hljs-subst">$&#123;<span class="hljs-variable language_">this</span>.name&#125;</span>, age is <span class="hljs-subst">$&#123;<span class="hljs-variable language_">this</span>.age&#125;</span>`</span>)<br>&#125;<br><span class="hljs-comment">// 实例化对象</span><br><span class="hljs-keyword">let</span> <span class="hljs-title class_">Uni</span> = <span class="hljs-keyword">new</span> <span class="hljs-title class_">User</span>(<span class="hljs-string">&#x27;Uni&#x27;</span>, <span class="hljs-number">22</span>)<br><span class="hljs-comment">// 调用对象的方法</span><br><span class="hljs-title class_">Uni</span>.<span class="hljs-title function_">sayHello</span>()<br></code></pre></td></tr></table></figure>
<blockquote>
<p>运行结果<br>My name is Uni, age is 22</p>
</blockquote>
<p>ES6的写法</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">class</span> <span class="hljs-title class_">User</span>&#123;<br>   <span class="hljs-comment">// 构造方法</span><br>    <span class="hljs-title function_">constructor</span>(<span class="hljs-params">name, age</span>)&#123;<br>       <span class="hljs-variable language_">this</span>.<span class="hljs-property">name</span> = name;<br>       <span class="hljs-variable language_">this</span>.<span class="hljs-property">age</span> = age; <br>    &#125;<br>    <span class="hljs-comment">// ES6 Class类里的方法必须使用方法名() ，而不能使用 ES5的 方法名:function()</span><br>    <span class="hljs-title function_">sayHello</span>(<span class="hljs-params"></span>)&#123;<br>        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">`My name is <span class="hljs-subst">$&#123;<span class="hljs-variable language_">this</span>.name&#125;</span>, age is <span class="hljs-subst">$&#123;<span class="hljs-variable language_">this</span>.age&#125;</span>`</span>)<br>    &#125;<br>&#125;<br><span class="hljs-keyword">let</span> <span class="hljs-title class_">Uni</span> = <span class="hljs-keyword">new</span> <span class="hljs-title class_">User</span>(<span class="hljs-string">&#x27;Uni&#x27;</span>, <span class="hljs-number">22</span>)<br><span class="hljs-title class_">Uni</span>.<span class="hljs-title function_">sayHello</span>()<br></code></pre></td></tr></table></figure>

<p>ES6 的 Class 支持静态属性，使用 static 关键字定义</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">class</span> <span class="hljs-title class_">User</span>&#123;<br>    <span class="hljs-comment">// 静态属性</span><br>    <span class="hljs-keyword">static</span> body = <span class="hljs-string">&#x27;normal&#x27;</span><br>    <span class="hljs-comment">// 构造方法</span><br>     <span class="hljs-title function_">constructor</span>(<span class="hljs-params"></span>)&#123;&#125;<br> &#125;<br></code></pre></td></tr></table></figure>
<h2 id="17-2-对象继承"><a href="#17-2-对象继承" class="headerlink" title="17.2 对象继承"></a>17.2 对象继承</h2><p>【例】面向对象编程实现手机类 （ES5写法）</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">// 定义父类手机</span><br><span class="hljs-keyword">function</span> <span class="hljs-title function_">Phone</span>(<span class="hljs-params">brand, price</span>)&#123;<br>    <span class="hljs-variable language_">this</span>.<span class="hljs-property">brand</span> = brand<br>    <span class="hljs-variable language_">this</span>.<span class="hljs-property">price</span> = price<br>&#125;<br><span class="hljs-comment">// 定义方法</span><br><span class="hljs-title class_">Phone</span>.<span class="hljs-property"><span class="hljs-keyword">prototype</span></span>.<span class="hljs-property">call</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;打电话&#x27;</span>)<br>&#125;<br><span class="hljs-comment">// 定义子类</span><br><span class="hljs-keyword">function</span> <span class="hljs-title function_">SmartPhone</span>(<span class="hljs-params">brand, price, color, size</span>)&#123;<br>    <span class="hljs-comment">// 调用父类的构造方法并修改父类的 this 指向</span><br>    <span class="hljs-title class_">Phone</span>.<span class="hljs-title function_">call</span>(<span class="hljs-variable language_">this</span>, brand, price)<br>    <span class="hljs-variable language_">this</span>.<span class="hljs-property">color</span> = color<br>    <span class="hljs-variable language_">this</span>.<span class="hljs-property">size</span> = size<br>&#125;<br><span class="hljs-comment">//设置子级构造函数的原型</span><br><span class="hljs-title class_">SmartPhone</span>.<span class="hljs-property"><span class="hljs-keyword">prototype</span></span> = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Phone</span><br><span class="hljs-title class_">SmartPhone</span>.<span class="hljs-property"><span class="hljs-keyword">prototype</span></span>.<span class="hljs-property">constructor</span> = <span class="hljs-title class_">SmartPhone</span><br><br><span class="hljs-comment">// 声明子类的方法</span><br><span class="hljs-title class_">SmartPhone</span>.<span class="hljs-property"><span class="hljs-keyword">prototype</span></span>.<span class="hljs-property">phone</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;拍照&#x27;</span>)<br>&#125;<br><span class="hljs-keyword">const</span> <span class="hljs-title class_">HuaWei</span> = <span class="hljs-keyword">new</span> <span class="hljs-title class_">SmartPhone</span>(<span class="hljs-string">&#x27;华为&#x27;</span>, <span class="hljs-number">3099</span>, <span class="hljs-string">&#x27;黑色&#x27;</span>, <span class="hljs-string">&#x27;5.5英寸&#x27;</span>)<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title class_">HuaWei</span>)<br></code></pre></td></tr></table></figure>
<blockquote>
<p> 运行结果<br>SmartPhone { brand: ‘华为’, price: 3099, color: ‘黑色’, size: ‘5.5英寸’ }</p>
</blockquote>
<p>使用 ES6 实现上述案例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">class</span> <span class="hljs-title class_">Phone</span>&#123;<br>    <span class="hljs-title function_">constructor</span>(<span class="hljs-params">brand, price</span>)&#123;<br>        <span class="hljs-variable language_">this</span>.<span class="hljs-property">brand</span> = brand<br>        <span class="hljs-variable language_">this</span>.<span class="hljs-property">price</span> = price<br>    &#125;<br>    <span class="hljs-title function_">call</span>(<span class="hljs-params"></span>)&#123;<br>        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;打电话&#x27;</span>)<br>    &#125;<br>&#125;<br><span class="hljs-keyword">class</span> <span class="hljs-title class_">SmartPhone</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_ inherited__">Phone</span>&#123;<br>    <span class="hljs-title function_">constructor</span>(<span class="hljs-params">brand, price, color, size</span>)&#123;<br>        <span class="hljs-variable language_">super</span>(brand, price) <span class="hljs-comment">// 相当于 Phone.call(this, brand, price)</span><br>        <span class="hljs-variable language_">this</span>.<span class="hljs-property">color</span> = color<br>        <span class="hljs-variable language_">this</span>.<span class="hljs-property">size</span> = size<br>    &#125;<br>    <span class="hljs-title function_">photo</span>(<span class="hljs-params"></span>)&#123; <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;拍照&#x27;</span>) &#125;<br>&#125;<br><br><span class="hljs-keyword">const</span> <span class="hljs-title class_">HuaWei</span> = <span class="hljs-keyword">new</span> <span class="hljs-title class_">SmartPhone</span>(<span class="hljs-string">&#x27;华为&#x27;</span>, <span class="hljs-number">3099</span>, <span class="hljs-string">&#x27;黑色&#x27;</span>, <span class="hljs-string">&#x27;5.5英寸&#x27;</span>)<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title class_">HuaWei</span>)<br></code></pre></td></tr></table></figure>
<h2 id="17-3-子类重写父类方法"><a href="#17-3-子类重写父类方法" class="headerlink" title="17.3 子类重写父类方法"></a>17.3 子类重写父类方法</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">class</span> <span class="hljs-title class_">A</span>&#123;<br>    <span class="hljs-title function_">constructor</span>(<span class="hljs-params"></span>)&#123;&#125;<br>    <span class="hljs-title function_">hello</span>(<span class="hljs-params"></span>)&#123; <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;A: hello&#x27;</span>)&#125;<br>&#125;<br><span class="hljs-keyword">class</span> <span class="hljs-title class_">B</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_ inherited__">A</span> &#123;<br>    <span class="hljs-title function_">constructor</span>(<span class="hljs-params"></span>)&#123;<span class="hljs-variable language_">super</span>()&#125;<br>    <span class="hljs-title function_">hello</span>(<span class="hljs-params"></span>) &#123; <br>        <span class="hljs-comment">// 重写方法时可调用父类的方法</span><br>        <span class="hljs-variable language_">super</span>.<span class="hljs-title function_">hello</span>(); <br>        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;B: hello&#x27;</span>)&#125;<br>&#125;<br>b = <span class="hljs-keyword">new</span> <span class="hljs-title function_">B</span>()<br>b.<span class="hljs-title function_">hello</span>()<br></code></pre></td></tr></table></figure>
<h2 id="17-4-get-和-set"><a href="#17-4-get-和-set" class="headerlink" title="17.4 get 和 set"></a>17.4 get 和 set</h2><p>【例】</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">class</span> <span class="hljs-title class_">Phone</span>&#123;<br>    <span class="hljs-comment">// constructor 构造函数可以不写</span><br>    <span class="hljs-keyword">get</span> <span class="hljs-title function_">price</span>()&#123;            <span class="hljs-comment">// 默认返回当前属性值</span><br>       <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;价格属性被读取&#x27;</span>)<br>       <span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>.<span class="hljs-property">p</span><br>    &#125;<br>    <span class="hljs-keyword">set</span> <span class="hljs-title function_">price</span>(<span class="hljs-params">val</span>)&#123;<br>        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;价格属性被修改&#x27;</span>)<br>        <span class="hljs-variable language_">this</span>.<span class="hljs-property">p</span> = val<br>    &#125;<br>&#125;<br><span class="hljs-keyword">let</span> phone = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Phone</span>()<br><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(phone.<span class="hljs-property">price</span>) <span class="hljs-comment">// undefined</span><br><br>phone.<span class="hljs-property">price</span> = <span class="hljs-number">100</span><br><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(phone.<span class="hljs-property">price</span>)<br></code></pre></td></tr></table></figure>
<blockquote>
<p>运行结果<br>价格属性被读取<br>undefined<br>价格属性被修改<br>价格属性被读取<br>100</p>
</blockquote>
<h1 id="18-ES6-Number-类型拓展"><a href="#18-ES6-Number-类型拓展" class="headerlink" title="18. ES6 Number 类型拓展"></a>18. ES6 Number 类型拓展</h1><p>Number.EPSILON 可以表示最小精度，用于浮点数之间的运算，当两个数的差值小于这个精度时候，则视为相等，默认值为 <code>2.220446049250313e-16</code></p>
<p>0b 可表示二进制，0o表示八进制，0x表示十六进制</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-number">0b1010</span>)<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-number">0o12</span>)<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-number">10</span>)<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-number">0xA</span>)<br></code></pre></td></tr></table></figure>
<blockquote>
<p>运行结果<br>10<br>10<br>10<br>10</p>
</blockquote>
<p>**Number.isFinite **检测一个数值是否为有限数</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title class_">Number</span>.<span class="hljs-built_in">isFinite</span>(<span class="hljs-number">100</span>))       <span class="hljs-comment">// true</span><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title class_">Number</span>.<span class="hljs-built_in">isFinite</span>(<span class="hljs-number">100</span>/<span class="hljs-number">0</span>))     <span class="hljs-comment">// false</span><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title class_">Number</span>.<span class="hljs-built_in">isFinite</span>(<span class="hljs-title class_">Infinity</span>))  <span class="hljs-comment">// false</span><br></code></pre></td></tr></table></figure>
<p><strong>Number.isNaN</strong> 判断是否为 NaN类型</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title class_">Number</span>.<span class="hljs-built_in">isNaN</span>(<span class="hljs-number">1</span>))                    <span class="hljs-comment">// false</span><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title class_">Number</span>.<span class="hljs-built_in">isNaN</span>(<span class="hljs-string">&#x27;2&#x27;</span>))                  <span class="hljs-comment">// false</span><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title class_">Number</span>.<span class="hljs-built_in">isNaN</span>(<span class="hljs-keyword">new</span> <span class="hljs-title class_">Number</span>(<span class="hljs-string">&#x27;3a&#x27;</span>)))     <span class="hljs-comment">// false</span><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title class_">Number</span>.<span class="hljs-built_in">isNaN</span>(<span class="hljs-keyword">new</span> <span class="hljs-title class_">Number</span>(<span class="hljs-string">&#x27;a&#x27;</span>)))      <span class="hljs-comment">// false</span><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title class_">Number</span>.<span class="hljs-built_in">isNaN</span>(<span class="hljs-title class_">NaN</span>))                  <span class="hljs-comment">// true</span><br></code></pre></td></tr></table></figure>

<h1 id="19-ES6-对象方法的拓展"><a href="#19-ES6-对象方法的拓展" class="headerlink" title="19. ES6 对象方法的拓展"></a>19. ES6 对象方法的拓展</h1><ol>
<li><p><strong>Object.is 判断两个值是否完全相等</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title class_">Object</span>.<span class="hljs-title function_">is</span>(<span class="hljs-title class_">NaN</span>, <span class="hljs-title class_">NaN</span>)) <span class="hljs-comment">// true</span><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title class_">NaN</span> === <span class="hljs-title class_">NaN</span>)         <span class="hljs-comment">// false</span><br></code></pre></td></tr></table></figure>
</li>
<li><p><strong>Object.assign 对象的合并</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">const</span> config1 = &#123;<br>    <span class="hljs-attr">host</span>: <span class="hljs-string">&#x27;localhost&#x27;</span>,<br>    <span class="hljs-attr">port</span>: <span class="hljs-number">3306</span>,<br>    <span class="hljs-attr">username</span>: <span class="hljs-string">&#x27;root&#x27;</span>,<br>    <span class="hljs-attr">password</span>: <span class="hljs-string">&#x27;123456&#x27;</span>,<br>&#125;<br><span class="hljs-keyword">const</span> config2 = &#123;<br>    <span class="hljs-attr">host</span>: <span class="hljs-string">&#x27;127.0.0.1&#x27;</span><br>&#125;<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title class_">Object</span>.<span class="hljs-title function_">assign</span>(config1, config2))<br></code></pre></td></tr></table></figure>
<blockquote>
<p>运行效果<br>{ host: ‘127.0.0.1’, port: 3306, username: ‘root’, password: ‘123456’ }</p>
</blockquote>
</li>
<li><p>Object.setPrototypeOf ，Object.getPrototypeof 给实例对象的构造函数设置原型对象</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">const</span> user = &#123; <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;uni&#x27;</span>&#125;<br><span class="hljs-keyword">const</span> role = &#123; <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;普通用户&#x27;</span>&#125;<br><span class="hljs-title class_">Object</span>.<span class="hljs-title function_">setPrototypeOf</span>(user, role)<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;user:&#x27;</span>, user)<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;getPrototypeOf:&#x27;</span>, <span class="hljs-title class_">Object</span>.<span class="hljs-title function_">getPrototypeOf</span>(user))<br></code></pre></td></tr></table></figure>
<blockquote>
<p>运行结果<br>user: { name: ‘uni’ }<br>getPrototypeOf: { name: ‘普通用户’ }</p>
</blockquote>
</li>
</ol>
<h1 id="20-ES6-模块化"><a href="#20-ES6-模块化" class="headerlink" title="20. ES6 模块化"></a>20. ES6 模块化</h1><p>模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来</p>
<p><strong>模块化的优势：</strong></p>
<ol>
<li>防止命名冲突</li>
<li>代码服用</li>
<li>高维护性</li>
</ol>
<p><strong>ES6 之前的模块化规范：</strong><br>CommonJS &#x3D;&gt; NodeJS、Browserify<br>AMD &#x3D;&gt; requireJS<br>CMD &#x3D;&gt; seaJS<br><strong>ES6 模块化语法：</strong><br>模块功能主要由两个命令构成：export 和 import</p>
<ul>
<li>export 用于规定模块的对外接口</li>
<li>import 用于输入其他模块提供的功能</li>
</ul>
<p>【例】<br>uni.js</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">export</span> <span class="hljs-keyword">let</span> name = <span class="hljs-string">&#x27;uni&#x27;</span><br><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">sayHello</span>(<span class="hljs-params"></span>)&#123;<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">`hi, i am <span class="hljs-subst">$&#123;name&#125;</span>`</span>)<br>&#125;<br></code></pre></td></tr></table></figure>
<p>index.html</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Document<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>  <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;module&quot;</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">      <span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> uni <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./static/uni.js&#x27;</span></span><br><span class="language-javascript">      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(uni)</span><br><span class="language-javascript">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>    <br>  <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>
<p>运行结果：<br><img src="https://img-blog.csdnimg.cn/ba1c8a0e265c431d8f1d1c1c211cd9b0.png" srcset="/img/loading.gif" lazyload alt="在这里插入图片描述"></p>
<p>除了上述的 export 方法以外，还可以统一 export </p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> name = <span class="hljs-string">&#x27;uni&#x27;</span><br><br><span class="hljs-keyword">function</span> <span class="hljs-title function_">sayHello</span>(<span class="hljs-params"></span>)&#123;<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">`hi, i am <span class="hljs-subst">$&#123;name&#125;</span>`</span>)<br>&#125;<br><br><span class="hljs-keyword">export</span> &#123; name, sayHello &#125;<br></code></pre></td></tr></table></figure>

<p>ES6 支持 默认的 export，这样在 import 的时候，需通过 default 来调用里面的属性或方法</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> &#123;<br>    <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;uni&#x27;</span>,<br>    <span class="hljs-title function_">sayHello</span>(<span class="hljs-params"></span>)&#123;<br>      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">`hi, i am <span class="hljs-subst">$&#123;name&#125;</span>`</span>)<br>    &#125;<br>&#125;<br></code></pre></td></tr></table></figure>


<h2 id="20-1-import-时使用解构赋值"><a href="#20-1-import-时使用解构赋值" class="headerlink" title="20.1 import 时使用解构赋值"></a>20.1 import 时使用解构赋值</h2><p>ES6 支持 解构赋值的方式导入其他的模块</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">// 导入统一的export</span><br><span class="hljs-keyword">import</span> &#123;name, sayHello&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./static/uni.js&#x27;</span><br><span class="hljs-comment">// 导入默认的export</span><br><span class="hljs-keyword">import</span> &#123;<span class="hljs-keyword">default</span> <span class="hljs-keyword">as</span> uni&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./static/xxx.js&#x27;</span><br></code></pre></td></tr></table></figure>
<h2 id="20-2-默认export的导入"><a href="#20-2-默认export的导入" class="headerlink" title="20.2 默认export的导入"></a>20.2 默认export的导入</h2><p>如果要 import 的 js 文件是使用 export default 方式导出的，那么则可以简写import</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">import</span> xxx <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;xxx.js&#x27;</span><br></code></pre></td></tr></table></figure>

<h2 id="20-3-import-引入的第二种方式"><a href="#20-3-import-引入的第二种方式" class="headerlink" title="20.3 import 引入的第二种方式"></a>20.3 import 引入的第二种方式</h2><p>假设 app.js 是 web 程序的入口脚本文件，通常需要引入一些内容<br>uni.js</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">export</span> <span class="hljs-keyword">let</span> name = <span class="hljs-string">&#x27;uni&#x27;</span><br><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">sayHello</span>(<span class="hljs-params"></span>)&#123;<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">`hi, i am <span class="hljs-subst">$&#123;name&#125;</span>`</span>)<br>&#125;<br></code></pre></td></tr></table></figure>
<p>app.js</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> uni <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./static/uni.js&#x27;</span><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(uni)<br></code></pre></td></tr></table></figure>
<p>index.html</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Document<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./static/app.js&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;module&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>
<h2 id="20-4-ES6-模块化代码转换"><a href="#20-4-ES6-模块化代码转换" class="headerlink" title="20.4 ES6 模块化代码转换"></a>20.4 ES6 模块化代码转换</h2><p>Babel 官网：<a target="_blank" rel="noopener" href="https://www.babeljs.cn/docs/">https://www.babeljs.cn/docs/</a><br>Babel 是一个工具链，主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。<br>这里以了解为主，用到的时候再查阅相关资料</p>

                
              </div>
            
            <hr/>
            <div>
              <div class="post-metas my-3">
  
    <div class="post-meta mr-3 d-flex align-items-center">
      <i class="iconfont icon-category"></i>
      

<span class="category-chains">
  
  
    
      <span class="category-chain">
        
  <a href="/categories/%E5%89%8D%E7%AB%AF/" class="category-chain-item">前端</a>
  
  

      </span>
    
  
</span>

    </div>
  
  
    <div class="post-meta">
      <i class="iconfont icon-tags"></i>
      
        <a href="/tags/JavaScript/">#JavaScript</a>
      
    </div>
  
</div>


              
  

  <div class="license-box my-3">
    <div class="license-title">
      <div>JavaScript 笔记1 ES6 新特性 _ 解构赋值、模板字符串、Symbol数据类型、Promise、模块化</div>
      <div>http://example.com/2022/08/16/JavaScript 笔记1 ES6 新特性 _ 解构赋值、模板字符串、Symbol数据类型、Promise、模块化/</div>
    </div>
    <div class="license-meta">
      
        <div class="license-meta-item">
          <div>作者</div>
          <div>John Doe</div>
        </div>
      
      
        <div class="license-meta-item license-meta-date">
          <div>发布于</div>
          <div>2022年8月16日</div>
        </div>
      
      
      <div class="license-meta-item">
        <div>许可协议</div>
        <div>
          
            
            
              <a target="_blank" href="https://creativecommons.org/licenses/by/4.0/">
              <span class="hint--top hint--rounded" aria-label="BY - 署名">
                <i class="iconfont icon-by"></i>
              </span>
              </a>
            
          
        </div>
      </div>
    </div>
    <div class="license-icon iconfont"></div>
  </div>



              
                <div class="post-prevnext my-3">
                  <article class="post-prev col-6">
                    
                    
                      <a href="/2022/08/19/Vue2%20%E5%BC%80%E5%8F%91%E6%80%BB%E7%BB%93%20axios%20%E4%BA%8C%E6%AC%A1%E5%B0%81%E8%A3%85%20_%20%E8%AF%B7%E6%B1%82%E3%80%81%E5%93%8D%E5%BA%94%E3%80%81%E6%B8%B2%E6%9F%93%E7%9A%84%E5%A4%A7%E8%87%B4%E6%B5%81%E7%A8%8B%E5%88%86%E6%9E%90/" title="Vue2 开发总结 axios 二次封装 _ 请求、响应、渲染的大致流程分析">
                        <i class="iconfont icon-arrowleft"></i>
                        <span class="hidden-mobile">Vue2 开发总结 axios 二次封装 _ 请求、响应、渲染的大致流程分析</span>
                        <span class="visible-mobile">上一篇</span>
                      </a>
                    
                  </article>
                  <article class="post-next col-6">
                    
                    
                      <a href="/2022/08/11/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F%20%E7%AC%94%E8%AE%B02%20_%20%E4%B8%83%E4%B8%AA%E7%BB%93%E6%9E%84%E5%9E%8B%E6%A8%A1%E5%BC%8F%20_%20%E9%80%82%E9%85%8D%E5%99%A8%E6%A8%A1%E5%BC%8F%20_%20%E6%A1%A5%E6%8E%A5%E6%A8%A1%E5%BC%8F%20_%20%E8%A3%85%E9%A5%B0%E5%99%A8%E6%A8%A1%E5%BC%8F%20_%20%E7%BB%84%E5%90%88%E6%A8%A1%E5%BC%8F%20_%20%E4%BB%A3%E7%90%86%E6%A8%A1%E5%BC%8F_%20%E5%A4%96%E8%A7%82%E6%A8%A1%E5%BC%8F%20_%20%E4%BA%AB%E5%85%83%E6%A8%A1%E5%BC%8F%20_%E6%A8%A1%E6%9D%BF%E4%BB%A3%E7%A0%81%E3%80%81%E4%BC%98%E7%BC%BA%E7%82%B9%E3%80%81%E5%BA%94%E7%94%A8%E5%9C%BA%E6%99%AF%E6%80%BB%E7%BB%93%20_%20%E5%9F%BA%E4%BA%8EJava%E5%AE%9E%E7%8E%B0/" title="设计模式 笔记2 _ 七个结构型模式 _ 适配器模式 _ 桥接模式 _ 装饰器模式 _ 组合模式 _ 代理模式_ 外观模式 _ 享元模式 _模板代码、优缺点、应用场景总结 _ 基于Java实现">
                        <span class="hidden-mobile">设计模式 笔记2 _ 七个结构型模式 _ 适配器模式 _ 桥接模式 _ 装饰器模式 _ 组合模式 _ 代理模式_ 外观模式 _ 享元模式 _模板代码、优缺点、应用场景总结 _ 基于Java实现</span>
                        <span class="visible-mobile">下一篇</span>
                        <i class="iconfont icon-arrowright"></i>
                      </a>
                    
                  </article>
                </div>
              
            </div>

            
          </article>
        </div>
      </div>
    </div>

    <div class="side-col d-none d-lg-block col-lg-2">
      
  <aside class="sidebar" style="margin-left: -1rem">
    <div id="toc">
  <p class="toc-header"><i class="iconfont icon-list"></i>&nbsp;目录</p>
  <div class="toc-body" id="toc-body"></div>
</div>



  </aside>


    </div>
  </div>
</div>





  



  



  



  



  







    

    
      <a id="scroll-top-button" aria-label="TOP" href="#" role="button">
        <i class="iconfont icon-arrowup" aria-hidden="true"></i>
      </a>
    

    
      <div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">搜索</h4>
        <button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <input type="text" id="local-search-input" class="form-control validate">
          <label data-error="x" data-success="v" for="local-search-input">关键词</label>
        </div>
        <div class="list-group" id="local-search-result"></div>
      </div>
    </div>
  </div>
</div>

    

    
  </main>

  <footer>
    <div class="footer-inner">
  
    <div class="footer-content">
       <a href="https://hexo.io" target="_blank" rel="nofollow noopener"><span>Hexo</span></a> <i class="iconfont icon-love"></i> <a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener"><span>Fluid</span></a> 
    </div>
  
  
  
  
</div>

  </footer>

  <!-- Scripts -->
  
  <script  src="https://lib.baomitu.com/nprogress/0.2.0/nprogress.min.js" ></script>
  <link  rel="stylesheet" href="https://lib.baomitu.com/nprogress/0.2.0/nprogress.min.css" />

  <script>
    NProgress.configure({"showSpinner":false,"trickleSpeed":100})
    NProgress.start()
    window.addEventListener('load', function() {
      NProgress.done();
    })
  </script>


<script  src="https://lib.baomitu.com/jquery/3.6.0/jquery.min.js" ></script>
<script  src="https://lib.baomitu.com/twitter-bootstrap/4.6.1/js/bootstrap.min.js" ></script>
<script  src="/js/events.js" ></script>
<script  src="/js/plugins.js" ></script>


  <script  src="https://lib.baomitu.com/typed.js/2.0.12/typed.min.js" ></script>
  <script>
    (function (window, document) {
      var typing = Fluid.plugins.typing;
      var subtitle = document.getElementById('subtitle');
      if (!subtitle || !typing) {
        return;
      }
      var text = subtitle.getAttribute('data-typed-text');
      
        typing(text);
      
    })(window, document);
  </script>




  
    <script  src="/js/img-lazyload.js" ></script>
  




  
<script>
  Fluid.utils.createScript('https://lib.baomitu.com/tocbot/4.18.2/tocbot.min.js', function() {
    var toc = jQuery('#toc');
    if (toc.length === 0 || !window.tocbot) { return; }
    var boardCtn = jQuery('#board-ctn');
    var boardTop = boardCtn.offset().top;

    window.tocbot.init({
      tocSelector     : '#toc-body',
      contentSelector : '.markdown-body',
      headingSelector : CONFIG.toc.headingSelector || 'h1,h2,h3,h4,h5,h6',
      linkClass       : 'tocbot-link',
      activeLinkClass : 'tocbot-active-link',
      listClass       : 'tocbot-list',
      isCollapsedClass: 'tocbot-is-collapsed',
      collapsibleClass: 'tocbot-is-collapsible',
      collapseDepth   : CONFIG.toc.collapseDepth || 0,
      scrollSmooth    : true,
      headingsOffset  : -boardTop
    });
    if (toc.find('.toc-list-item').length > 0) {
      toc.css('visibility', 'visible');
    }
  });
</script>


  <script src=https://lib.baomitu.com/clipboard.js/2.0.10/clipboard.min.js></script>

  <script>Fluid.plugins.codeWidget();</script>


  
<script>
  Fluid.utils.createScript('https://lib.baomitu.com/anchor-js/4.3.1/anchor.min.js', function() {
    window.anchors.options = {
      placement: CONFIG.anchorjs.placement,
      visible  : CONFIG.anchorjs.visible
    };
    if (CONFIG.anchorjs.icon) {
      window.anchors.options.icon = CONFIG.anchorjs.icon;
    }
    var el = (CONFIG.anchorjs.element || 'h1,h2,h3,h4,h5,h6').split(',');
    var res = [];
    for (var item of el) {
      res.push('.markdown-body > ' + item.trim());
    }
    if (CONFIG.anchorjs.placement === 'left') {
      window.anchors.options.class = 'anchorjs-link-left';
    }
    window.anchors.add(res.join(', '));
  });
</script>


  
<script>
  Fluid.utils.createScript('https://lib.baomitu.com/fancybox/3.5.7/jquery.fancybox.min.js', function() {
    Fluid.plugins.fancyBox();
  });
</script>


  <script>Fluid.plugins.imageCaption();</script>

  <script  src="/js/local-search.js" ></script>





<!-- 主题的启动项，将它保持在最底部 -->
<!-- the boot of the theme, keep it at the bottom -->
<script  src="/js/boot.js" ></script>


  

  <noscript>
    <div class="noscript-warning">博客在允许 JavaScript 运行的环境下浏览效果更佳</div>
  </noscript>
</body>
</html>
